<template>
	<view class="container">
		<!-- 头部导航 -->
		<view class="header-bag">
			<image src="../../../static/img/icon-Get-into@3.png" class="back-btn" @click="goBack"></image>
			<text class="header-title">任务历史</text>
			<image src="../../../static/img/data.png" class="date-icon" @click="showDatePicker"></image>
		</view>
		
		<!-- 任务背景区域 -->
		<view class="task-bg">
			<view class="task-list">
				<view class="date-info">
					<text class="year-text">{{ currentYear }}</text>年
					<text class="month-text">{{ currentMonth }}</text>月
				</view>
				<text class="task-desc">
					亲爱的聪明宝贝会员，以下是您{{ currentMonth }}月份的任务奖励表
				</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 月邀请 -->
			<view class="nav-section">
				<view class="title-nav">
					<image src="../../../static/img/titlepg.png" class="title-bg"></image>
					<text class="section-title">月邀请</text>
				</view>
				<view class="invite-list">
					<view class="invite-item">
						<image class="invite-icon" src="../../../static/img/hy.png"></image>
						<text class="invite-text">普通会员（{{ taskData.usercount || 0 }}人）</text>
					</view>
					<view class="invite-item">
						<image class="invite-icon" src="../../../static/img/hhrzz.png"></image>
						<text class="invite-text">合伙人资质（{{ taskData.partnercount || 0 }}份）</text>
					</view>
				</view>
			</view>
			
			<!-- 月奖励 -->
			<view class="nav-section">
				<view class="title-nav">
					<image src="../../../static/img/titlepg.png" class="title-bg"></image>
					<text class="section-title">月奖励</text>
				</view>
				
				<!-- 有奖励时显示 -->
				<view class="reward-container" v-if="hasReward">
					<view class="reward-left">
						<image class="reward-bg" src="../../../static/img/image/jl-bg.png"></image>
						<text class="reward-amount">{{ rewardData.base[0] || 0 }}</text>
					</view>
					<view class="reward-right">
						<image 
							class="reward-bg-right" 
							:src="rewardData.index === 2 ? '../../../static/img/image/jp-bg.png' : '../../../static/img/image/dx-bg.png'"
						></image>
						<text class="reward-amount-right">{{ rewardData.base[1] || 0 }}</text>
					</view>
				</view>
				
				<!-- 无奖励时显示 -->
				<view class="no-reward" v-else>
					<image class="no-reward-bg" src="../../../static/img/icon-jl-default-bg.png"></image>
					<text class="no-reward-text">很可惜，您未达成最低任务，这里什么都没有！</text>
				</view>
			</view>
		</view>
		
		<!-- 底部说明 -->
		<view class="footer-note">
			【当月完成任务，次月7个工作日内发放薪资及奖励】
		</view>
		
		<!-- 日期选择器 -->
		<uni-datetime-picker 
			v-model="selectedDate" 
			type="date" 
			:clear-icon="false"
			format="yyyy-MM"
			@change="onDateChange"
			ref="datePicker"
		></uni-datetime-picker>
	</view>
</template>

<script>
	import { teamApi } from '../../../api/index.js'
	import {
		inject
	} from 'vue'
	
	export default {
		data() {
			return {
				baseUrl: inject('$baseUrl'),
				serverAddress: inject('$serverAddress', ''), // 提供默认值
				currentYear: new Date().getFullYear(),
				currentMonth: new Date().getMonth() === 0 ? 12 : new Date().getMonth(),
				selectedDate: '',
				taskData: {},
				rewardData: {},
				userIndex: 1 // 1: 云主, 2: 代理人
			}
		},
		
		computed: {
			hasReward() {
				return this.rewardData.base && (this.rewardData.base[0] || this.rewardData.base[1]);
			}
		},
		
		onLoad() {
			// 获取用户类型
			this.userIndex = uni.getStorageSync('index') || 1;
			
			// 初始化当前月份
			this.initCurrentMonth();
			
			// 加载任务历史数据
			this.loadTaskHistory();
		},
		
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 初始化当前月份
			initCurrentMonth() {
				const now = new Date();
				let month = now.getMonth();
				month = month === 0 ? 12 : month;
				
				this.currentMonth = month < 10 ? '0' + month : month.toString();
				this.selectedDate = `${this.currentYear}-${this.currentMonth}`;
			},
			
			// 显示日期选择器
			showDatePicker() {
				this.$refs.datePicker.show();
			},
			
			// 日期改变事件
			onDateChange(date) {
				if (date) {
					const [year, month] = date.split('-');
					this.currentYear = parseInt(year);
					this.currentMonth = month;
					this.loadTaskHistory();
				}
			},
			
			// 加载任务历史数据
			async loadTaskHistory() {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					
					const result = await teamApi.getTaskHistory({
						y: parseInt(this.currentYear),
						m: parseInt(this.currentMonth),
						userType: this.userIndex
					});
					
					uni.hideLoading();
					
					if (result.r === 0) {
						this.taskData = result.data;
						this.processRewardData(result.data);
					} else {
						uni.showToast({
							title: '获取数据失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			},
			
			// 处理奖励数据
			processRewardData(data) {
				this.rewardData = {
					index: this.userIndex,
					base: []
				};
				
				if (this.userIndex === 1) {
					// 云主
					this.rewardData.base = [data.staff_reward || 0, data.staff_salary || 0];
				} else if (this.userIndex === 2) {
					// 代理人
					this.rewardData.base = [data.agent_reward || 0, data.agent_prize || 0];
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header-bag {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #0ac346;
		display: flex;
		align-items: center;
		z-index: 999;
	}
	
	.back-btn {
		width: 40rpx;
		height: 64rpx;
		margin-left: 30rpx;
	}
	
	.header-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		color: white;
		margin-right: 70rpx; /* 平衡右侧日期图标 */
	}
	
	.date-icon {
		width: 64rpx;
		height: 64rpx;
		margin-right: 30rpx;
	}
	
	.task-bg {
		width: 100%;
		height: 600rpx;
		padding-top: 212rpx;
		color: white;
		background-image: url('../../../static/img/taskbg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: 88rpx;
	}
	
	.task-list {
		text-align: center;
	}
	
	.date-info {
		font-size: 36rpx;
		color: #FEFEFE;
		margin-bottom: 40rpx;
	}
	
	.year-text, .month-text {
		font-weight: bold;
	}
	
	.task-desc {
		font-size: 36rpx;
		color: #fffcb5;
		display: block;
	}
	
	.content {
		padding: 0 30rpx;
	}
	
	.nav-section {
		border-bottom: 1px solid #e8e8e8;
		padding-bottom: 60rpx;
		margin-top: 57rpx;
	}
	
	.title-nav {
		position: relative;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.title-bg {
		position: absolute;
		width: 430rpx;
		height: 90rpx;
	}
	
	.section-title {
		color: #e6882e;
		font-size: 48rpx;
		font-weight: bold;
		z-index: 2;
	}
	
	.invite-list {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}
	
	.invite-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.invite-icon {
		width: 138rpx;
		height: 138rpx;
		margin-bottom: 20rpx;
	}
	
	.invite-text {
		font-size: 28rpx;
		color: #4b4b4b;
	}
	
	.reward-container {
		position: relative;
		height: 460rpx;
		margin-top: 60rpx;
	}
	
	.reward-left {
		position: absolute;
		left: 75rpx;
		top: 60rpx;
	}
	
	.reward-bg {
		width: 300rpx;
		height: 240rpx;
	}
	
	.reward-amount {
		position: absolute;
		top: 0;
		left: 0;
		width: 180rpx;
		color: #fff;
		font-size: 80rpx;
		line-height: 240rpx;
		text-align: center;
	}
	
	.reward-right {
		position: absolute;
		right: 75rpx;
		top: 100rpx;
	}
	
	.reward-bg-right {
		width: 300rpx;
		height: 240rpx;
	}
	
	.reward-amount-right {
		position: absolute;
		top: 50rpx;
		left: 60rpx;
		width: 180rpx;
		color: #fff;
		font-size: 80rpx;
		line-height: 240rpx;
		text-align: center;
	}
	
	.no-reward {
		position: relative;
		height: 460rpx;
		margin-top: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.no-reward-bg {
		width: 300rpx;
		height: 240rpx;
	}
	
	.no-reward-text {
		font-size: 28rpx;
		color: #BBBCBC;
		text-align: center;
		margin-top: 40rpx;
	}
	
	.footer-note {
		font-size: 28rpx;
		text-align: center;
		color: #BBBCBC;
		padding: 40rpx 30rpx;
	}
</style>